<script lang="ts" setup name="AdvertisingColumnStyle">
import { Props } from "@/components/componentscom/AdvertisingColumn/AdvertisingColumn.d.ts";
import { onMounted, ref, toRefs } from "vue";
import { getGoodsList, getFoodCategoryList } from "@/api/modules/goods";
import { Search, Plus } from "@element-plus/icons-vue";
import SelectTreeData from "@/components/SelectTreeData/index.vue";

const props = defineProps<Props>();
const { datas } = toRefs(props);

onMounted(() => {});

// 删除组件
const onDelImg = i => {
  if (datas.value.list.length <= 1) return;
  datas.value.list = datas.value.list.filter((v, index) => i !== index);
};
// 添加组件
const add = () => {
  datas.value.list.push({
    image: "",
    linkName: "",
    linkDesc: ""
  });
};

// 选择商品
const SelectTreeDataRef = ref<InstanceType<typeof SelectTreeData> | null>(null);
const openDialog = index => {
  SelectTreeDataRef.value?.acceptParams({
    title: "选择商品",
    isView: false,
    index,
    selType: "radio",
    columns: [
      { type: "radio", label: "#", width: 60 },
      { prop: "name", label: "菜品名称", align: "left" }
    ],
    idName: "foodCategoryId",
    api: getGoodsList,
    treeApi: getFoodCategoryList
  });
};
// 选中的商品
const onSelectGoods = e => {
  datas.value.list[e.index].image = e.data.image;
  datas.value.list[e.index].linkName = e.data.name;
  datas.value.list[e.index].linkCom = "/pages/product/product_detail?productId=" + e.data.id;
  datas.value.list[e.index].productId = e.data.id;
};
</script>

<template>
  <div>
    <div class="title">{{ datas.text }}</div>
    <el-form :model="datas" label-width="150px" label-position="left">
      <el-form-item label="商品组件名称">
        <el-input v-model="datas.title"></el-input>
      </el-form-item>
      <el-form-item label="显示商品组件名称">
        <el-radio-group v-model="datas.isShowTitle">
          <el-radio :value="true">是</el-radio>
          <el-radio :value="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="图片高度设置">
        <el-slider v-model="datas.height" :show-tooltip="false" :min="50" />
      </el-form-item>
      <div class="imgs" v-for="(lun, imx) in datas.list" :key="imx">
        <div class="close">
          <el-icon @click="onDelImg(imx)"><Close /></el-icon>
        </div>
        <div class="ml20 mr20">
          <el-form-item label="选择商品">
            <el-input disabled v-model="lun.productId">
              <template #append>
                <el-button :icon="Search" @click="openDialog(imx)" />
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="商品描述:">
            <el-input v-model="lun.linkDesc" placeholder="活动描述"></el-input>
          </el-form-item>

          <el-form-item label="商品名字:">
            <el-input v-model="lun.linkName" disabled></el-input>
          </el-form-item>

          <el-form-item label="链接指向:">
            <el-input v-model="lun.linkCom" disabled></el-input>
          </el-form-item>
        </div>
      </div>

      <el-form-item>
        <el-button type="primary" @click="add">添加商品</el-button>
      </el-form-item>
    </el-form>

    <SelectTreeData ref="SelectTreeDataRef" @radio="onSelectGoods"></SelectTreeData>
  </div>
</template>

<style lang="scss" scoped>
.title {
  padding: 5px;
  margin-bottom: 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  border-left: 4px solid var(--el-color-primary);
}
.imgs {
  margin-bottom: 15px;
  border: 1px dashed #eeeeee;
  .close {
    display: flex;
    flex-direction: row-reverse;
    padding: 5px;
    margin-bottom: 20px;
    cursor: pointer;
    background-color: #f2f2f2;
  }
}
</style>
